<template>
  <div>
    <div style="width:100%;height:400px;" id="home_page_map"></div>
    <mapModal
        :modalShow="mapModalVisible"
        :areaName="areaName"
    ></mapModal>
  </div>
</template>

<script>
import echarts from "echarts";
import mapModal from "./mapModal.vue";
export default {
  name: "homeMap",
  props: {
    cityData: Array
  },
  components: {
    mapModal
  },
  data() {
    return {
      myChart: null,
      mapModalVisible: false,
      areaName:'',
      modalTitle: ""
    };
  },
  watch: {
    cityData(val) {
      let geoCoordMap = {
        广州市: [113.23, 23.16],
        韶关市: [116.27, 31.586],
        清远市: [118.07, 32.486],
        肇庆市: [117.27, 33.086],
        河源市: [116.87, 32.586],
        梅州市: [117.37, 33.716],
        佛山市: [116.67, 33.686],
        云浮市: [116.27, 33.386],
        茂名市: [115.57, 32.916],
        湛江市: [116.47, 30.586],
        阳江市: [117.47, 30.286],
        江门市: [118.17, 29.886],
        中山市: [118.87, 30.716],
        珠海市: [118.17, 31.186],
        东莞市: [118.298, 31.676],
        深圳市: [117.47, 30.856],
        惠州市: [117.47, 30.856],
        汕尾市: [117.47, 30.856],
        汕头市: [117.47, 30.856],
        揭阳市: [117.47, 30.856],
        潮州市: [117.47, 30.856]
      };
      let data = [
        {
          name: "广州市",
          value: 0
        },
        {
          name: "韶关市",
          value: 0
        },
        {
          name: "清远市",
          value: 0
        },
        {
          name: "肇庆市",
          value: 0
        },
        {
          name: "河源市",
          value: 0
        },
        {
          name: "梅州市",
          value: 0
        },
        {
          name: "佛山市",
          value: 0
        },
        {
          name: "云浮市",
          value: 0
        },
        {
          name: "茂名市",
          value: 0
        },
        {
          name: "湛江市",
          value: 0
        },
        {
          name: "阳江市",
          value: 0
        },
        {
          name: "江门市",
          value: 0
        },
        {
          name: "中山市",
          value: 0
        },
        {
          name: "珠海市",
          value: 0
        },
        {
          name: "东莞市",
          value: 0
        },
        {
          name: "深圳市",
          value: 0
        },
        {
          name: "惠州市",
          value: 0
        },
        {
          name: "汕尾市",
          value: 0
        },
        {
          name: "汕头市",
          value: 0
        },
        {
          name: "揭阳市",
          value: 0
        },
        {
          name: "潮州市",
          value: 0
        }
      ];
      val.forEach(val => {
        data.find(v => v.name == val.cityName).value = val.carsCount;
      });

      let handleData = function(data) {
        let list = [];
        for (let i = 0; i < data.length; i++) {
          let geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            list.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
            });
          }
        }
        return list;
      };

      let option = {
        baseOption: {
          timeline: {
            show: false
          },
          tooltip: {
            trigger: "item",
            formatter: "{b}<br/>车辆总数：{c}"
          }
        },
        options: [
          {
            backgroundColor: "#fff",
            //   title: {
            //     text: "安徽省2019·英雄联盟钻石段位人员分布图",
            //     left: "center",
            //     top: "10",
            //     textStyle: {
            //       color: "#ffffff",
            //       fontSize: 24
            //     }
            //   },
            visualMap: {
              min: 0,
              max: 500,
              left: "20",
              bottom: "50",
              text: ["500", "0"],
              calculable: false,
              inRange: {
                color: ["#f1e8cd", "#ffca0f", "#f28665", "#1263a1"]
              },
              textStyle: {
                color: "#ffffff",
                fontSize: 14
              },
              itemWidth: 30,
              itemHeight: 150
            },
            geo: {
              show: true,
              map: "lol",
              itemStyle: {
                normal: {
                  areaColor: "transparent",
                  borderColor: "transparent",
                  shadowColor: "transparent",
                  shadowBlur: 30
                },
                emphasis: {
                  areaColor: "#000"
                }
              }
            },
            series: [
              {
                name: "light",
                type: "scatter",
                coordinateSystem: "geo",
                data: handleData(data),
                symbolSize: 1,
                label: {
                  normal: {
                    formatter: "{b}",
                    fontSize: 10,
                    show: true
                  },
                  emphasis: {
                    show: true
                  }
                },
                itemStyle: {
                  normal: {
                    color: "#ccc",
                    areaColor: "transparent",
                    borderColor: "transparent",
                    label: {
                      show: true,
                      textStyle: {
                        color: "rgb(249, 249, 249)",
                        fontSize: 16
                      }
                    }
                  }
                }
              },
              {
                center: "center",
                data: data,
                label: {
                  emphasis: {
                    show: false
                  },
                  normal: {
                    show: false
                  }
                },
                mapType: "lol",
                roam: false,
                type: "map"
              }
            ]
          }
        ]
      };
      this.myChart.setOption(option);
    }
  },
  mounted() {
    var convertData = function(data) {
      let res = [];
      let len = data.length;
      for (var i = 0; i < len; i++) {
        var geoCoord = geoData[data[i].name];
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value)
          });
        }
      }
      return res;
    };

    this.myChart = echarts.init(document.getElementById("home_page_map"));
    const geoJson = require("../map-data/guangdong.json");
    echarts.registerMap("lol", geoJson); // 自定义地图
    let me = this;
    this.myChart.on("click", function(params) {
      me.mapModalVisible=true;
      me.areaName = params.name;
    });

    window.addEventListener("resize", function() {
      me.myChart.resize();
    });
  }
};
</script>


